<template>
<div class="login">
    <div class="login_cn">
        <h1>欢迎登录</h1>
         <el-tabs v-model="activeName">
            <el-tab-pane label="企业快速登录" name="first">

                <div class="name"><el-input v-model="name" placeholder="请输入用户名" v-focus prefix-icon="el-icon-s-custom"></el-input></div>
                <div class="password"><el-input v-model="password" type="password" placeholder="请输入密码"  prefix-icon="el-icon-lock"></el-input></div>
                <div class="code" v-show="showCode"><div class="code_cont"> 验证码:</div><el-input v-model="securityCode" type="text" placeholder="请输入验证码">  </el-input><img :src="'data:image/png;base64,'+qrcodeImg" :width="qrcodeWidth+'px'" :height="qrcodeHeight+'px'" /></div>
                <!-- <div class="dan">
                    <label><input type="checkbox">下次自动登录</label>
                    <router-link to='/userCenter'>忘记密码？</router-link>
                </div> -->
                <button @click="login()">登 录</button>
                <div class="cont">
                        申请会员？<router-link to='/supplierInPage'>马上联系我们 <i class="el-icon-arrow-right"></i></router-link>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="个人邮箱登录" name="second">
                <div class="name"><el-input v-model="name" placeholder="请输入邮箱或用户名"  prefix-icon="el-icon-s-custom"></el-input></div>
                <div class="password"><el-input v-model="password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input></div>
                <div class="dan">
                    <label><input type="checkbox">下次自动登录</label>
                    <router-link to=''>忘记密码？</router-link>
                </div>
                <button @click="login()">登 录</button>
                <div class="cont">
                        申请会员？<router-link to=''>马上联系我们 <i class="el-icon-arrow-right"></i></router-link>
                </div>
            </el-tab-pane> -->
        </el-tabs>
    </div>
    

</div>
</template>
<style rel="stylesheet/scss" lang="scss" >
.login{
    margin-top: 88px;
    position: relative;
    text-align: center;
    .el-tabs__nav{display: none;}
    .code{
        margin-top: 20px;
        .code_cont{float: left;line-height: 40px;}
        .el-input{width: auto;float: left;margin-top: 0 !important}
        .el-input{
            width: 150px;
        }
        .el-input__inner{
            width: 96% !important;
        }
        img{
            height: 40px;
            min-height: 100%;
        }
    }
    h1{
        text-align: center;
        color: #5963a1;
        font-size: 30px;
        margin-bottom: 40px;
    }
    .login_cn{
         display: inline-block;
        background-color: #ffffff;
        box-shadow: 0px 3px 41px 9px 
            rgba(0, 0, 0, 0.26);
        border-radius: 3px;
        padding: 80px 100px;
        width: 500px;
        .el-tabs__active-bar,.el-tabs__nav-wrap::after{
            display: none;
        }
        .el-tabs__header{
            margin: 0;
        }
        .el-tabs__item{
            font-size: 18px;
            color: #333333;
            line-height: 47px;
            height: 47px;
            padding: 0;
            width: 170px;
            text-align: center;
            border-radius: 4px;
	        border: solid 1px #cfd4d7;
            &.is-active,&:hover{
                background-color: #5963a1;
                color: #fff;
            }
            &#tab-first{
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                margin-right: -1px;
            }
            &#tab-second{
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        .el-tabs__content{
            .el-input{
                margin-top: 20px;
            }
            input{
                background-color: #ffffff;
                border-radius: 4px;
                border: solid 1px #cfd4d7;
                width: 100%;
            }
            button{
                width: 100%;
                background-color: #5963a1;
                height: 40px;
                border-radius: 4px;
                line-height: 40px;
                color:#fff;
                text-align: center;
                margin-top: 20px;
                border: none;
                font-size: 16px;
                
            }
        }
        .dan{
            label{
                font-size: 12px;
                color: #999999;
                float: left;
                input{
                    width: 12px;
                    height: 12px;
                    line-height: 12px;
                    background-color: #ced4d7;
                    border-radius: 2px;
                    border: none;
                    position: relative;
                    top: 2px;
                    margin-top: 10px;
                }
            }
            a{
                float: right;
                margin-top: 10px;
                 font-size: 12px;
                color: #999999;
                line-height: 17px;
            }
        }
        .cont{
            text-align: center;
            margin-top: 20px;
            font-size: 13px;
            a{
                display:inline-block;
                color: #5963a1;
                i{
                    font-size: 12px;
                }
            }
        }
    }
}
</style>

<script>
export default {
    name : 'login',
    data(){
        return{
            activeName: 'first',
            name:'',
            password:'',
            securityCode:'',
            showCode:false,
            qrcode:'',
            qrcodeImg:'',
            imageCode:'',
            qrcodeWidth:100,
            qrcodeHeight:50
        }
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
            // 聚焦元素
                el.querySelector('input').focus()
            }
        }
    },
    created(){
        var lett = this;
            document.onkeydown = function(e) {
                var key = window.event.keyCode;
                if (key == 13) {
                lett.login();
            }
        }
    },
    methods:{
        login(){
            if(this.name == ''){
                this.$message.error('请输入用户名')
                return false;
            }
            if(this.password == ''){
                this.$message.error('请输入密码')
                return false;
            }
            if(this.showCode){
                if(this.securityCode == ''){
                    this.$alert("请输入验证码！", '提示', {
                        confirmButtonText: '确定',
                    });
                    return false
                }else if(this.securityCode.toUpperCase()  != this.imageCode.toUpperCase()){
                    this.$alert("验证码错误！", '提示', {
                        confirmButtonText: '确定',
                    });
                    return false
                }
            }
            let self = this
            this.$http.post('/api/login',{userName:this.name,
               password:this.password},function(res){
                if(res.success){
                    console.log(res)
                    localStorage.setItem("token",res.data.token)
                    localStorage.setItem("expiryTime",res.data.expiryTime)
                    localStorage.setItem("refreshToken",res.data.refreshToken)
                    self.getUserInfo();
                }else{
                    if(res.data.loginErrCount >= 3){
                        self.showCode = true
                        self.getQrCode();
                    }
                    self.$message.error(res.message)
                    // self.$alert(res.message, '提示', {
                    //     confirmButtonText: '确定',
                    //     callback: action => {
                        //   self.name = ''
                          self.password = ''
                        // }
                    // });
                   
                }
            })
        },
        getQrCode(){
            let self = this
            this.$http.post('/api/getCaptcha',{width:this.qrcodeWidth,height:this.qrcodeHeight},function(res){
                console.log(res)
                if(res.success){
                    self.qrcodeImg = res.data.imageBase64
                    self.imageCode = res.data.imageCode
                }
            })
        },
        getUserInfo(){
            let self = this
            this.$http.get('/api/users/getCurrentUser',{},function(res){
                console.log(res)
                localStorage.setItem("userName",res.data.userName)
                localStorage.setItem('userIcon',res.data.userIcon)
                console.log(res.data.permissions.length)
                if(res.data.permissions != null && res.data.permissions.length > 0){
                    localStorage.setItem("userRole",true)
                }
                self.$router.push({path:'/'})
            })
        }
    }
}
</script>